@model TaxonomyPartEditViewModel
@inject IContentManager ContentManager
@inject OrchardCore.ContentManagement.Display.IContentItemDisplayManager ContentItemDisplayManager
@inject OrchardCore.DisplayManagement.ModelBinding.IUpdateModelAccessor ModelUpdaterAccessor
@inject OrchardCore.ContentManagement.Metadata.IContentDefinitionManager ContentDefinitionManager
@using OrchardCore.ContentManagement.Metadata.Settings;
    
@*
    This template is used to render the editor for a Taxonomy content item.
    It render the hierarchy of the terms.
    The shape is created from TaxonomyPartDisplayDriver
*@

<script asp-src="~/OrchardCore.Taxonomies/Scripts/menu.js" at="Foot" depends-on="admin"></script>
<style asp-src="~/OrchardCore.Taxonomies/Styles/menu.min.css" debug-src="~/OrchardCore.Taxonomies/Styles/menu.css"></style>

@{
    var updater = ModelUpdaterAccessor.ModelUpdater;
    var canAddTerm = Model.TaxonomyPart.ContentItem.Id != 0;
    var termContentTypes = ContentDefinitionManager.ListTypeDefinitions().Where(t => String.IsNullOrEmpty(t.Settings.ToObject<ContentTypeSettings>().Stereotype)).OrderBy(x => x.DisplayName);
    var index = 0;
}
<fieldset class="form-group" asp-validation-class-for="TermContentType">
    <label asp-for="TermContentType" >@T["Term Content Type"]</label>
    <select asp-for="TermContentType" class="form-control col-sm" asp-items="@(new SelectList(termContentTypes, "Name", "DisplayName"))">
    </select>
    <span asp-validation-for="TermContentType"></span>
</fieldset>

@if (canAddTerm && Model.TermContentType != null)
{
    var termContentType = ContentDefinitionManager.GetTypeDefinition(Model.TermContentType);

    <a class="btn btn-primary btn-sm" 
        asp-route-action="Create" 
        asp-route-controller="Admin" 
        asp-route-id="@Model.TaxonomyPart.TermContentType" 
        asp-route-taxonomyContentItemId="@Model.TaxonomyPart.ContentItem.ContentItemId"
        asp-route-area="OrchardCore.Taxonomies">
        @T["Add {0}", termContentType.DisplayName]
    </a>
}

<p>
    <ol id="menu">
        @foreach (var menuItem in Model.TaxonomyPart.ContentItem.As<TaxonomyPart>().Terms)
        {
            dynamic termShape = await ContentItemDisplayManager.BuildDisplayAsync(menuItem, updater, "TermAdmin");
            termShape.TaxonomyPart = Model.TaxonomyPart;
            termShape.Index = index++;
            @await DisplayAsync(termShape);
        }
    </ol>
</p>

<input asp-for="Hierarchy" type="hidden" value="" />
<div id="msg-leave" style="display:none" data>@T["You have reordered the taxonomy."]</div>

<script at="Foot">
    var menuItemId;
    var confirmLeave;

    $(function () {
        $('#menu')
            .nestedSortable({
                handle: 'div.menu-item-title',
                items: 'li.menu-item',
                toleranceElement: '> div.menu-item-title',
                relocate: function () {
                    confirmLeave = true;
                    $('#@Html.IdFor(m => m.Hierarchy)').attr('value', JSON.stringify($('#menu').nestedSortable('toHierarchy')));
                }
            });

        window.onbeforeunload = function () {
            if (confirmLeave) {
                return $('#msg-leave').text();
            }
        }

        $('#menu').closest("form").on('submit', function (e) {
            confirmLeave = false;
            window.onbeforeunload = function () { };
        });
    });


</script>